"use strict";
import React, { useState, useEffect, useRef } from "react";
import * as echarts from "echarts/core";
import {
  GridComponent,
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  DataZoomComponent,
  MarkLineComponent,
} from "echarts/components";
import { UniversalTransition } from "echarts/features";
import { BarChart, LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { FullscreenOutlined } from "@ant-design/icons";
import { Modal } from "antd";
import styles from "./index.less";
/*
 * 组件注释
 * create by wuqiong
 * creation time 2021/05/19
 * 柱形图组件
 * */
echarts.use([
  GridComponent,
  TitleComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  TooltipComponent,
  DataZoomComponent,
  MarkLineComponent,
  UniversalTransition,
]);
const Index = props => {
  const {
    id,
    isRotate = false,
    title,
    yAxis = {},
    xAxis = {},
    dataSource,
    legend = false,
    series,
    borderRadius = [10, 10, 0, 0],
    grid = {},
    enlarge = false,
    subTitle = {},
    options,
  } = props;

  const [visible, setVisible] = useState(false);
  const dataRef = useRef(null);
  const drawChart = chartId => {
    let chartDom = document.getElementById(chartId);
    let myChart = echarts.init(chartDom);

    // TIP 监听div宽高变化事件
    const observer = new ResizeObserver(myChart.resize).observe(chartDom);
    dataRef.current = { observer };
    myChart.clear();
    let _xAxis = {
      type: "category",
      axisTick: { show: false },
      nameTextStyle: { color: "rgba(255,255,255,0.6)" },
      axisLabel: { color: "rgba(255,255,255,0.6)" },
      splitLine: { show: false },
      axisLine: { show: false },
      ...xAxis,
    };

    let _yAxis =
      yAxis && yAxis.length
        ? yAxis
        : {
            type: "value",
            nameTextStyle: {
              color: "rgba(255,255,255,0.6)",
            },
            axisLabel: { color: "rgba(255,255,255,0.6)" },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(255,255,255,0.3)"],
                width: 1,
                type: "dotted",
              },
            },
            axisLine: {
              show: false,
            },
            ...yAxis,
          };

    let _series = series || [
      {
        data: dataSource,
        type: "bar",
        itemStyle: {
          borderRadius: borderRadius,
        },
      },
    ];

    let option = {
      barMaxWidth: isRotate ? 10 : 15,
      textStyle: { fontFamily: "Microsoft YaHei" },
      color: [
        "#2B93FC",
        "rgba(254,149,67)",
        "rgba(254,221,46)",
        "rgba(0,207,205)",
        "#FF5545",
        "#8029E3",
        "#65C7E5",
        "#A7BC18",
        "#04BFAE",
        "#9285FF",
        "#E95FA8",
        "#FF97A5",
      ],
      title: [
        {
          show: true,
          text: title,
        },
        {
          show: Object.keys(subTitle).length > 0,
          textStyle: {
            fontSize: 12,
            fontWeight: "normal",
            color: "rgba(0 ,0, 0, .45)",
          },
          ...subTitle,
        },
      ],
      legend: {
        show: legend,
        data: legend,
        bottom: 0,
        icon: "square",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        className: "echarts-tooltip",
        confine: true,
      },
      calculable: true,
      xAxis: isRotate ? _yAxis : _xAxis,
      yAxis: isRotate ? _xAxis : _yAxis,
      grid: {
        top: 35,
        right: 20,
        bottom: legend ? 30 : 5,
        left: 15,
        containLabel: true,
        ...grid,
      },
      series: _series,
      ...options,
    };

    option && myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  };

  useEffect(() => {
    drawChart(`bar_main_${id}`);
  }, [dataSource, series]);

  useEffect(() => {
    if (visible) drawChart(`modal_bar_main_${id}`);
  }, [visible]);

  useEffect(() => {
    return () => {
      const { observer } = dataRef.current;
      let chartDom = document.getElementById(`bar_main_${id}`);
      observer?.disconnect(chartDom);
    };
  }, []);
  return (
    <div className={`${styles.index} barChart`}>
      <div id={`bar_main_${id}`} className={styles.drawing_board} />
      {enlarge ? (
        <span
          onClick={() => setVisible(true)}
          className={`${styles.icon} icon`}>
          <FullscreenOutlined style={{ fontSize: "12px", color: "#8492a6" }} />
          <span className={styles.desc}>展开</span>
        </span>
      ) : null}
      <Modal
        header={null}
        width={700}
        footer={null}
        open={visible}
        wrapClassName={"commonModal"}
        onCancel={() => setVisible(false)}>
        <div id={`modal_bar_main_${id}`} style={{ height: 340 }} />
      </Modal>
    </div>
  );
};
export default Index;
